<template>
	<view>
		<!--聊天内容-->
		<view class="chat_con">
			<view v-for="item in list" :class="item.admin_id>0?'con':'con lr blue'">
				<image src="/static/logo.png"></image>
				<view>
					<text>{{item.cc_content}}</text>
				</view>
			</view>
			<!-- <view class="con lr blue">
				<image src="/static/logo.png"></image>
				<view>
					<text>请问有哪些问题需要咨询的呢？</text>
				</view>
			</view> -->
		</view>
		<!--回复-->
		<view class="chat_reply">
			<textarea v-model="content"></textarea>
			<button @tap="funSend">{{$t('sending')}}</button>
		</view>
		<!--刷新-->
		<view class='loadind_con' v-if="isLoading">
			<view class="loading">
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import valid from '../../static/valid.js';

	export default {
		data() {
			return {
				list: [], //列表值
				detail: {},
				content: '', //内容
				isLoading: true, //是否正在加载
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t('chatroom')
			})
		},
		onLoad() {
			var _this = this;
			//加载列表
			_this.getData();

			//定义通讯方法 - 获取登录信息
			uni.$on('load_getChatroom', function(data) {
				_this.getData();
			});

			//定义4条读取一次
			setInterval(function() {
				if (_this.list.length > 0) {
					_this.getRecord();
				}
			}, 4000);
		},
		methods: {
			getData: function() { //获取内容
				var _this = this;

				_this.fun_request("/Api/ChatRoom/Get", {}, function(res) {
					console.log(res);
					_this.detail = res.data;
					_this.list = res.list;
					//加载完成
					_this.isLoading = false;

					//移动到底部
					_this.funScrollToEnd();
				});
			},
			getRecord() {
				var _this = this;

				_this.fun_request("/Api/ChatRoom/Record", {
					cr_id: _this.detail.cr_id,
					cc_setTime: _this.list[_this.list.length - 1].cc_setTime
				}, function(res) {
					if (res.code == 0) {
						_this.fun_map(res.data, function(i, item) {
							_this.list.push(item);
						});

						//vue强制刷新的作用
						_this.$forceUpdate();

						//移动到底部
						_this.funScrollToEnd();
					}
				});
			},
			//移动到底部
			funScrollToEnd() {
				setTimeout(function() {
					uni.pageScrollTo({
						scrollTop: 10000,
						duration: 300,
					});
				}, 500);
			},
			//发送
			funSend() {
				var _this = this;

				_this.fun_request("/Api/ChatRoom/Create", {
					cr_id: _this.detail.cr_id,
					cc_type: 0,
					cc_content: _this.content
				}, function(res) {
					if (res.code == 0) {
						_this.content = "";
						_this.getRecord();
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}

	.chat_con {
		margin: 30rpx auto 0;
		width: 94%;
		overflow: hidden;
		padding-bottom: 150rpx;

		.con {
			overflow: hidden;
			display: block;
			margin-top: 40rpx;
			min-height: 100rpx;
			position: relative;

			image {
				float: left;
				width: 85rpx;
				height: 85rpx;
				border-radius: 50%;
			}

			view {
				display: block;
				padding: 0 20rpx 0 115rpx;
				min-height: 60rpx;

				text {
					float: left;
					display: block;
					box-sizing: border-box;
					padding: 20rpx 15rpx;
					max-width: 100%;
					min-height: 60rpx;
					background-color: #fff;
					border-radius: 15rpx;
					font-size: 28rpx;
					overflow: hidden;
				}
			}
		}

		.lr {
			image {
				float: right;
			}

			view {
				padding: 0 115rpx 0 20rpx;

				text {
					float: right;
				}
			}
		}

		.blue {
			view {
				text {
					background-color: #F85F69;
					color: #fff;
				}
			}
		}
	}

	.chat_reply {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 140rpx;
		padding: 20rpx 3%;
		background-color: #fff;

		textarea {
			float: left;
			width: 80%;
			height: 100%;
			border-radius: 5px;
			border: 1rpx solid #ccc;
			padding: 10rpx;
		}

		button {
			float: right;
			width: 18%;
			height: 100%;
			text-align: center;
			line-height: 100rpx;
			background-color: #F85F69;
			color: #fff;
			border-radius: 5px;
			padding: 0;
		}
	}
</style>